<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>购物车</title>
		<link href="css/style.css" rel="stylesheet">
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	</head>
	<body>
		<div id="app">
			<h3>购物车</h3>
			<div class="clist">
				<table>
					<tbody>
						<tr>
							<th>图片</th>
							<th>商品</th>
							<th>价格</th>
							<th>数量</th>
							<th>小计</th>
							<th>操作</th>
						</tr>
					<!-- 	<tr>
							<td align="center"><img src="products/1/cs10008.jpg"></td>
							<td><a target="_blank">秋冬季毛呢外套女中长款圆领小香风呢子大衣</a></td>
							<td>￥336</td>
							<td>
								<button>-</button>
								<span>5</span>
								<button>+</button>
							</td>
							<td width="140"><span>￥1680</span></td>
							<td><a href="#" class="delete">删除</a></td>
						</tr>
						<tr>
							<td align="center"><img src="products/1/cs10004.jpg"></td>
							<td><a target="_blank">韩版女装翻领羔绒夹棉格子毛呢外套</a></td>
							<td>￥119</td>
							<td>
								<button>-</button>
								<span>2</span>
								<button>+</button>
							</td>
							<td width="140"><span>￥238</span></td>
							<td><a href="#" class="delete">删除</a></td>
						</tr>
						<tr>
							<td align="center"><img src="products/1/cs10003.jpg"></td>
							<td><a target="_blank">韩版女装翻领羔绒夹棉格子毛呢外套</a></td>
							<td>￥119</td>
							<td>
								<button>-</button>
								<span>7</span>
								<button>+</button>
							</td>
							<td width="140"><span>￥833</span></td>
							<td><a href="#" class="delete">删除</a></td>
						</tr>
						<tr> 
							<td id="tdSum" colspan="6" align="right">
								<label><label>合计金额</label>：<span>￥2751</span></label>
								<button onclick="location.href='index.html'">继续挑选</button>
								<button>提交订单</button>
							</td>
						</tr> -->
					</tbody>
				</table>
			</div>
		</div>
		<script>
			let json =localStorage.getItem("data");
			let products = localStorage.getItem("products");
			
			function sum(){
				let money =0;
				products.forEach(p=>{
					money+=p.nums*p.price;
				});
				$("#tdSum span").text("￥"+money);
			}
			
			function add(name ,nums){
				let e =event;
				let p =products.find(p=>p.name ==name);
				p.nums+=nums;
				sum();
				e.target.parentElement.querySelector("sapn").innerText;
				e.target.parentElement.nextElementSibling.querySelector("span").innerText =p.nums*p.price;
				localStorage.setItem("products",JSON.stringify(products));
			}
			
			
			$ (function(){

				if(json){
					let nums=1;
					let data =JSON.parse((json));
					if( !products){
						products=[];
					}else{
						products=JSON.parse(products);
					}
					let p=products.find(p=>p.name ==data.name);
					if(p){
						p.nums++;
					}else{
						products.push(data);
						
					}
							localStorage.setItem("products",JSON.stringify(products));
				}
				//将商品数据渲染到上面去
				console.info(products);
				let srs=$("table>tbody>tr");
				for(let i=0;i<srs.length-1 ;i++){
					srs[i].remove();
				}
				let html="";
				
				products.forEach(p=>{
					let row=`<tr>
							<td align="center"><img src="products/1/cs10004.jpg"></td>
							<td><a target="_blank">${p.name}</a></td>
							<td>￥${p.price}</td>
							<td>
								<button onclick="add('${p.name}',-1)">-</button>
								<span>${p.nums}</span>
								<button onclick="add('${p.name}',+1>+</button>	
							</td>
							<td width="140"><span>￥${p.price*p.nums}</span></td>
							<td><a href="#" class="delete">删除</a></td>
						</tr>`;
						
						html +=row;
						
				})
				let tr0 =$("table>tbody>tr").eq(0);
				
				tr0.after($(html));
				sum();
			})
		</script>
	</body>
</html>